<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.searchStr"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in alone.status"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.deptId"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <!-- 相关 -->
      <div class="c-aside clearfix">
        <!-- <el-button type="primary" class="fr btn" v-hasAuth:seestar_create
          >导入</el-button
        > -->
        <el-upload
          class="fr btn"
          v-hasAuth:agent_financeRewardImport
          :action="uploadImportAjax.config.url"
          :headers="uploadImportAjax.config.headers"
          name="file"
          :data="uploadImportAjax.config.data"
          ref="uploadImg"
          accept=".xlsx, .xls"
          :show-file-list="false"
          :on-success="uploadImportSuc"
          :on-error="uploadImportFail"
          :before-upload="uploadImportBefore"
        >
          <el-button type="primary">导入Excel</el-button>
        </el-upload>
        <el-button
          type="primary"
          class="fr btn"
          v-hasAuth:agent_financeRewardExportPic
          @click="rDownPicExcel"
          >下载图片excel</el-button
        >
        <el-button
          type="primary"
          class="fr btn"
          v-hasAuth:agent_financeRewardExport
          @click="rDownDataExcel"
          >下载数据excel</el-button
        >
      </div>
      <div class="clearfix">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条</div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            highlight-current-row
            @current-change="rTableItemChange"
          >
            <!-- <el-table-column label="序号" type="selection"> -->
            <el-table-column label="序号" type="index">
              <!-- <template slot-scope="scope">
                <img class="c-avatar" :src="scope.row.avatarUrl" alt="" />
              </template> -->
            </el-table-column>
            <el-table-column prop="nickName" label="审核单号">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.checkName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="核销项目名">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.checkNo || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="核销总额">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.checkTotal }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.checkStatus == 1 ? "已核销" : "未核销" }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRewardList, downDataExcel } from "@/api/finance.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";
const currentCorporation = JSON.parse(
  localStorage.getItem("currentCorporation")
);
export default {
  name: "agent_signedList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 0, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    orgSupAjax: {
      data: []
    },

    alone: {
      status: [
        {
          name: "全部",
          value: ""
        },
        {
          name: "已核销",
          value: 1
        },
        {
          name: "未核销",
          value: 2
        }
      ],
      searchForm: {
        loading: false,
        data: {
          checkStatus: "",
          deptId: ""
        }
      },
      checkItem: {}
    },
    translate: {
      biPlatformList: {}
    },
    uploadImportAjax: {
      loading: false,
      config: {
        disabled: false,
        headers: {},
        data: {
          tenantId: currentCorporation.id
        },
        url: "/bs/cost/brush/importExcel"
      }
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          multiple: false,
          emitPath: false,
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;

    _that.getPageData();
    _that.getOrgData();
  },
  methods: {
    rTableItemChange(rowData) {
      this.alone.checkItem = rowData;
      // console.log("rowData", rowData);
    },
    uploadImportSuc(respData) {
      let _that = this;
      _that.uploadImportAjax.loading.close();
      if (respData.code === this.STATUS.success[0]) {
        // this.excelPath.push(respData.data.fileUrl);
        _that.pageAjax.data.list = this.pageAjax.data.list.concat(
          respData.data
        );
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败"
        });
      }
    },
    uploadImportFail() {
      let _that = this;
      _that.uploadImportAjax.loading.close();
      _that.uploadImportAjax.config.disabled = false;
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    uploadImportBefore() {
      this.uploadImportAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
      // this.upLoadData.key = "2020-04-21/" + file.name;
    },
    rDownPicExcel() {
      let _that = this;
      let rowData = _that.alone.checkItem;
      if (!rowData.checkNo) {
        _that.$message.error("请选择要下载的图片");
        return;
      }
      if (!rowData.excelPath) {
        _that.$message.error("该数据没有excel图片表格");
        return;
      }
      window.location.href = rowData.excelPath;
      // let loadingHandle = _that.$loading({
      //   text: "下载中。。。",
      //   lock: true
      // });

      // downPicExcel({ checkNo: rowData.checkNo })
      //   .then(resp => {
      //     let respData = resp.data || {};
      //     if (respData.code !== _that.STATUS.success[0]) {
      //       _that.$message.error(respData.msg || "获取失败");
      //       return;
      //     }

      //     //if (respData.code === _that.STATUS.success[0]) {
      //     var blob = new Blob([respData]);
      //     var downloadElement = document.createElement("a");
      //     var href = window.URL.createObjectURL(blob); //创建下载的链接
      //     downloadElement.href = href;
      //     downloadElement.download = "运营刷币核销图片表格.xlsx"; //下载后文件名
      //     document.body.appendChild(downloadElement);
      //     downloadElement.click(); //点击下载
      //     document.body.removeChild(downloadElement); //下载完成移除元素
      //     window.URL.revokeObjectURL(href); //释放掉blob对象
      //     // } else {
      //     //   _that.$message.error(respData.msg || "查询失败");
      //     // }
      //   })
      //   .finally(() => {
      //     loadingHandle.close();
      //   });
    },
    rDownDataExcel() {
      let _that = this;
      let rowData = _that.alone.checkItem;
      if (!rowData.checkNo) {
        _that.$message.error("请选择要下载的数据");
        return;
      }

      let loadingHandle = _that.$loading({
        text: "下载中。。。",
        lock: true
      });

      downDataExcel({ checkNo: rowData.checkNo })
        .then(resp => {
          let respData = resp.data || {};
          // if (respData.code !== _that.STATUS.success[0]) {
          //   _that.$message.error(respData.msg || "获取失败");
          //   return;
          // }
          //if (respData.code === _that.STATUS.success[0]) {
          var blob = new Blob([respData]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "运营刷币核销数据表格.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          // } else {
          //   _that.$message.error(respData.msg || "查询失败");
          // }
        })
        .finally(() => {
          loadingHandle.close();
        });
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      // if (!searchForm.data.searchStr && !searchForm.data.signWish && !searchForm.data.platform) {
      //   _that.$message.error({message: "搜索条件不能都为空", onClose: () => {
      //     _that.alone.searchForm.loading = false;
      //   }});
      //   return;
      // }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },

    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getRewardList(data)
        .then(resp => {
          let respData = resp.data || {};
          let respResult = respData.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respResult.list || [];
            if (respResult.pagination) {
              _that.pageAjax.paging = {
                pages: respResult.pagination.pages,
                current: respResult.pagination.current,
                total: respResult.pagination.total,
                pageSize: respResult.pagination.pageSize
              };
            }
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },

    navToDetail(id) {
      this.$router.push({
        name: "agent_detail",
        query: {
          anchorId: id
        }
      });
    },
    navToLiveDetail(id) {
      this.$router.push({
        name: "agent_liveDetail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-agentWish {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
    .c-card {
      .c-item {
        padding-bottom: 20px;
        border-top: 1px solid #f5f7fa;
      }
      .c-UserInfo {
        position: relative;
        overflow: hidden;
        line-height: 25px;
      }
      .c-avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .c-nameInfo {
        float: left;
        margin-left: 20px;
      }
      .c-copyBtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 20px;
      }
      .c-bid {
        overflow: hidden;
        line-height: 30px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
